.outer {
position: relative;
height: 75px;
width: 300px;
text-align: center;
line-height: 75px;
color: white;
text-transform: uppercase;
}
.outer:before,
.outer:after {
position: absolute;
content: '';
top: 0px;
height: 100%;
width: 55%;
background: purple;
border: 2px solid white;
border-left-width: 3px;
z-index: -1;
}
.outer:before {
left: 0px;
border-radius: 20px;
border-right: none;
transform: skew(20deg);
transform-origin: top left;
background: seagreen;
border-color: red;
}
.outer:after {
right: 0px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-left: none;
background: yellowgreen;
border-color: maroon;
}
/* Just for demo of responsive nature */
.outer{
transition: all 1s;
}
.outer:hover{
height: 100px;
width: 400px;
line-height: 100px;
}
body{
background: lightblue;
}